<template>
  <div class="goods-add">
    <!-- 步骤条 -->
    <el-steps :active="active" finish-status="success">
      <el-step  title="步骤 1" description="基本信息"></el-step>
      <el-step title="步骤 2" description="商品图片"></el-step>
      <el-step title="步骤 3" description="商品类容"></el-step>
    </el-steps>

    <!-- tabs栏 -->
    <el-tabs v-model="activeTab" @tab-click="infoClick" tab-position="left">
      <el-tab-pane name="0" label="用户管理">
        <el-form :model="form" ref="form"  label-width="80px">
          <el-form-item label="商品名称" prop= 'goods_name'>
            <el-input v-model="form.goods_name" placeholder="请输入商品名称"></el-input>
          </el-form-item>

          <el-form-item label="商品价格" prop= 'goods_price'>
            <el-input v-model="form.goods_price" placeholder="请输入商品价格"></el-input>
          </el-form-item>

          <el-form-item label="商品重量" prop= 'goods_weight'>
            <el-input v-model="form.goods_weigth" placeholder="请输入商品重量"></el-input>
          </el-form-item>

          <el-form-item label="商品数量" prop= 'goods_number'>
            <el-input v-model="form.goods_number" placeholder="请输入商品数量"></el-input>
          </el-form-item>

          <el-form-item label="商品分类" prop= 'goods_cat'>
            <el-cascader
              v-model="form.goods_cat"
              :options="options"
              :props="props"
             ></el-cascader>
          </el-form-item>
        </el-form>
        <el-button @click="next" type="primary">下一步</el-button>
      </el-tab-pane>

      <!-- 上传图片 -->
      <el-tab-pane name="1" label="配置管理">
        <el-upload
          :before-upload= beforeUp
          multiple
          :headers= headers
          :action= action
          name="file"
          list-type="picture-card"
          :on-success="handSuccess"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-button @click="next" type="primary">下一步</el-button>

        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane name="2" label="商品类容">
        <quill-editor v-model="form.goods_introduce"></quill-editor>
        <el-button @click="addGoods" type="primary">添加</el-button>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  computed: {
    action () {
      return this.$axios.defaults.baseURL + 'upload'
    }
  },
  async created () {
    const { meta, data } = await this.$axios.get('categories?type=3')
    if (meta.status === 200) {
      this.options = data
    } else {
      this.$message.error(meta.msg)
    }
  },
  data () {
    return {
      active: 0,
      options: [],
      props: {
        expandTrigger: 'hover',
        value: 'cat_id',
        children: 'children',
        label: 'cat_name'
      },
      form: {
        goods_name: '',
        goods_cat: '',
        goods_price: '',
        goods_number: '',
        goods_weigth: '',
        goods_intrduce: '',
        pics: []
      },
      // rules: {
      //   goods_name: [
      //     { required: true, message: '商品名称不能为空', trigger: ['blur', 'change'] }
      //   ],
      //   // goods_cat: [
      //   //   { required: true, message: '商品id不能为空', trigger: ['blur', 'change'] }
      //   // ],
      //   goods_price: [
      //     { required: true, message: '商品价格不能为空', trigger: ['blur', 'change'] }
      //   ],
      //   goods_number: [
      //     { required: true, message: '商品数量不能为空', trigger: ['blur', 'change'] }
      //   ],
      //   goods_weight: [
      //     { required: true, message: '商品重量不能为空', trigger: ['blur', 'change'] }
      //   ]

      // },
      activeTab: '',
      headers: {
        Authorization: localStorage.getItem('token')
      },
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    infoClick (tab, event) {
      // console.log(tab, event)
      this.active = +tab.index
    },
    next () {
      this.active++
      this.activeTab = this.active + ''
    },
    handleRemove (file) {
      this.form.pics = this.form.pics.filter(v => v.pic !== file.response.data.tmp_path)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    beforeUp (file) {
      console.log(file)
      const isPNG = file.type === 'image/png'
      const isLt10K = file.size / 1024 < 10
      if (!isPNG) {
        this.$message.error('图片必须是png格式的')
      } else if (!isLt10K) {
        this.$message.error('图片必须10k以下的')
      }
      return isPNG && isLt10K
    },
    handSuccess (response, file, fileList) { // 上传成功时添加图片地址
      console.log(response, file, fileList)
      const { data, meta } = response
      if (meta.status === 200) {
        this.form.pics.push({ pic: data.tmp_path })
      }
    },
    async addGoods () {
      try {
        await this.$refs.form.validate()
        const { meta } = await this.$axios.post('goods', {
          ...this.form,
          goods_cat: this.form.goods_cat.join()
        })
        console.log(meta)
        if (meta.status === 201) {
          this.$router.push('/goods')
          this.$message.success(meta.msg)
        }
      } catch (e) {
        this.$message.error(e)
      }
    }

  }

}
</script>

<style lang = 'less' scoped>
  .quill-editor{
    background-color: #fff;
    /deep/ .ql-editor{
      height: 300px;
    }
  }
</style>
